<template>
    <!--评估页面 -->
    <el-container ref="bigModel" class="main-model">
        <el-header>
            <Header :active-title="3" />
        </el-header>
        <el-main>


            <div class="home-model">

                <el-row style="height: 100%">
                    <el-col :span="leftModelSpan" style="height: 100%">
                        <div class="home-model-left">

                            <div class="container">

                                <div class="section">
                                    <div class="chart-container">
                                        <div class="zindexModel" />
                                        <userifm class="Tc1" />
                                        <dialog131 />
                                        <dialog13 />
                                        <Dialog class="Tc2" />

                                    </div>
                                </div>
                                <div class="section">
                                    <div class="chart-container">
                                        <div class="zindexModel" />
                                        <userifm class="Tc1" />
                                        <dialog131 />
                                        <dialog13 />
                                        <Dialog class="Tc2" />
                                    </div>
                                </div>
                                <img v-if="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt=""
                                    class="rightJ" style="" @click="hideRightModel">
                                <img v-else :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="rightJ"
                                    style="" @click="showRightModel">
                            </div>
                            </div>
                    </el-col>
                    <el-col :span="rightModelSpan">
                        <div class="home-model-right">
                            <div class="infoModel">
                                <div class="infoTitle flex-container">
                                    用户位置泄露风险统计
                                    <!-- 跳转终端页面 -->
                                    <el-button type="text" @click="toantiLocalization" class="more">
                                        更多
                                    </el-button>
                                </div>
                                <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                                    <barchart />
                                </div>
                            </div>
                            <div class="infoModel">
                                <div class="infoTitle flex-container">
                                    用户位置泄露风险告警
                                    <!-- 跳转终端页面 -->
                                    <el-button type="text" @click="toantiLocalization" class="more">
                                        更多
                                    </el-button>
                                </div>
                                <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                                    <list-scroll class="box" :speed="0.5">
                                        <div class="list">
                                            <div class="infoItem1" v-for="(item, index) in infoList" :key="index">
                                                <div class="_num">
                                                    {{ index + 1 }}
                                                </div>
                                                <div class="_cont">
                                                    {{ item.content }}
                                                </div>
                                            </div>
                                        </div>
                                    </list-scroll>
                                </div>
                            </div>
                            <div class="infoModel">
                                <div class="infoTitle flex-container">
                                    用户抗定位任务列表
                                    <!-- 跳转终端页面 -->
                                    <el-button type="text" @click="toantiLocalization" class="more">
                                        更多
                                    </el-button>
                                </div>
                                <div class="infoContent" :style="{ height: infoHeight + 'px' }">
                                    <list-scroll class="box" :speed="0.5">
                                        <div class="list">
                                            <div class="infoItem2" v-for="(item, index) in infoList2" :key="index">
                                                <div class="_num">
                                                    {{ index + 1 }}
                                                </div>
                                                <div class="_cont">
                                                    {{ item.content }}
                                                </div>
                                            </div>
                                        </div>
                                    </list-scroll>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div>

            </div>
        </el-main>
    </el-container>
</template>

<script>
import Header from "@/views/xd/components/Header";
import Dialog from "@/views/xd/components/dialog/dialog.vue";
import dialog131 from "@/views/xd/components/dialog/dialog14.vue";
import dialog13 from "@/views/xd/components/dialog/dialog13.vue";
import barchart from "@/views/xd/components/charts/3DColumnChart2.vue"
import userifm from "@/views/xd/components/dialog/userInformation.vue";

import ListScroll from "@/components/DtSrcollCopy2";
import * as echarts from 'echarts';
export default {
    components: { Header, Dialog, dialog131, dialog13, ListScroll, barchart, userifm },
    data() {
        return {
            rightModelShow: true,
            rightModelSpan: 5,
            leftModelSpan: 19,
            activeIndex: "1",
            activeIndex2: "1",
            formInline: {
                user: "",
                region: "",
            },
            infoList: [
                {
                    content: "宁小宁，2846059400，存在家庭地址泄露",
                },
                {
                    content: "404noence，3041184793，存在工作地址泄露",
                },
                {
                    content: " 万理PKT，7800534882，存在工作地址泄露",
                },
                {
                    content: "V-ersion，5638987914，存在家庭地址泄露",
                },
                {
                    content: " _叶抱一，5083838438，存在家庭地址泄露",
                },
                {
                    content: "  娱千千，7738694985，存在工作地址泄露",
                },
                {
                    content: " 吃瓜群众CJ，1885688010，存在家庭地址泄露",
                },
                {
                    content: "賣勾靠杯，5577340573，存在工作地址泄露",
                },
                {
                    content: "宁小宁，2846059400，存在家庭地址泄露",
                },
                {
                    content: "404noence，3041184793，存在工作地址泄露",
                },
                {
                    content: " 万理PKT，7800534882，存在工作地址泄露",
                }
            ],
            infoList2: [
                {
                    content: "开心超人，4516561265，抗定位任务已完成",
                },
                {
                    content: "UB6598，1353584514，抗定位任务已完成70%",
                },
                {
                    content: "无敌王龙，8455874623，抗定位任务已完成60%",
                },
                {
                    content: "吃瓜群众，1285634898，抗定位任务已完成50%",
                },
                {
                    content: "世界和平，3648527445，抗定位任务完成40%",
                },
                {
                    content: "海阔天空，8415274541，抗定位任务已完成30%",
                },
                {
                    content: "HO，4514956665，抗定位任务已完成",
                }
            ],

            infoHeight: 300,
            scrollTop: 0,
        };
    },
    mounted() {
        this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
        let that = this;

    },
    methods: {
        toantiLocalization() {
            this.$router.push("/networkUser/antiLocalization");
        },
        hideRightModel() {
            this.rightModelShow = false;
            this.rightModelSpan = 0;
            this.leftModelSpan = 24;
        },
        showRightModel() {
            this.rightModelShow = true;
            this.rightModelSpan = 5;
            this.leftModelSpan = 19;
        },

        onSubmit() { },
    },
};
</script>
<style lang="scss" scoped>
.home-model-right {

    border-radius: 5px;
    padding: 5px;

    .infoContent {
        padding-top: 48px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .infoModel {
        position: relative;

        .infoTitle {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background-image: url(~@/assets/xd/new/title.png);
            background-size: 100% 80%;
            background-repeat: no-repeat;
            color: #fff;
        }

        .infoBody {
            height: 100%;
            padding-top: 48px;
            box-sizing: border-box;
        }
    }
}

.home-model-left {
    position: relative;
    height: 100%;
}

.home-model {
    position: relative;
    width: 100%;
    height: 100%;
}


.body {
    font-size: 18px;
    position: absolute;
    top: 60px;
    right: 10px;
    padding: 8px;
    color: #90CEE9;


}



.bg {
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px;
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/xd/dialogbg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 10000;
}

.Dialog1 {
    position: absolute;
    left: 100px;
    top: 200px;
    width: 420px;
    height: 250px;
}

.title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22px;
    color: #ffffff;
    line-height: 1px;
    text-align: left;
    font-style: normal;
    text-align: center;
    font-weight: bold;
}

.Tc1 {
    position: absolute;
    top: 10px;
    left: 30px;
    width: 400px;
    height: 250px;
}

.Tc2 {
    position: absolute;
    bottom: 10px;
    right: 30px;
    width: 400px;
    height: 300px;
}

.flex-container {
    display: flex;
    justify-content: space-between;
}

.scroll-div {
    margin-top: 10px;
    overflow: hidden;
    animation: scroll 1s linear infinite;
}

.infoItem {
    line-height: 1.3em !important;
    font-size: 18px;
}

.home-model-right .infoModel .infoTitle {
    z-index: 1;
}

.infoList {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.scroll-div {
    position: absolute;
    width: 100%;
    bottom: -1px;
    margin-top: 10px;
    overflow: hidden;
    border-top-left-radius: 30px;
}

.el-header {
    padding: 0;
    z-index: 5;
}

.more {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}

.zindexModel {
    position: absolute;
    background-color: #153968a6;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.rightJ{
       
            z-index: 1000;
}
.section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid black;
    background-image: url('~@/assets/xd/xd-bg3.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
}



.chart-container {
    width: 100%;
    height: 300px;
}

button {
    margin-bottom: 10px;
}

.zindexModel {
    position: absolute;
    background-color: #153968a6;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
</style>
